<template>
    <div>
        <!-- 点菜前判断 -->
        <el-dialog center
            title="开 台"
            :visible.sync="judgeBeforeOrder"
            width="30%"
            :close-on-click-modal = 'false'
            :close-on-press-escape	 = 'false'
            :show-close = 'false'
            >
                <ul class="formBox">
                    <li class="formItem">
                        <label for="">就餐人数：</label>
                        <el-input v-model="eatingNum"placeholder="请输入就餐人数" size = 'medium'></el-input>
                    </li>
                    <li class="formItem">
                        <label for="">就餐桌号：</label>
                        <el-input v-model="tableNum" placeholder="请输入就餐桌号" size = 'medium'></el-input>
                    </li>
                    <li class="formItem">
                        <label for="">备注：</label>
                        <el-input v-model="remarks" placeholder="请输入就餐桌号" size = 'medium'></el-input>
                    </li>
                    <li class="formItem">
                        <el-button class="searchBtn" type="primary" size= 'medium' @click="confirmInitOrder()">确认开台</el-button>
                        <el-button class="searchBtn" type="primary" size= 'medium' @click="quitBeforeOrder()">取消</el-button>
                    </li>
                </ul>
        </el-dialog>
        <!-- 点菜前判断提示 -->
        <el-dialog center
            title="提示"
            :visible.sync="isShowTableTips"
            :close-on-click-modal = 'false'
            :close-on-press-escape	 = 'false'
            :show-close = 'false'
            width="20%">
            <div class="tableTips">
                <p><input type="text" class="verifyTableTips" readonly v-model="verifyTableTips"></p>
                <p><el-button  type="primary" size= 'medium' @click="createInitOrder()">确定</el-button></p>     
            </div> 
        </el-dialog>
        <!-- 下单成功 -->
        <el-dialog center
            title="提示"
            :visible.sync="isSuccesss"
            :close-on-click-modal = 'false'
            :close-on-press-escape	 = 'false'
            :show-close = 'false'
            width="20%">
            <div class="tableTips">
                <p><input type="text" class="verifyTableTips" readonly v-model="successTips"></p>
                <p><el-button  type="primary" size= 'medium' @click=" isSuccesss = !isSuccesss">确定</el-button></p>     
            </div> 
        </el-dialog>
        <!-- 已有订单，验证桌号 -->
        <el-dialog center
            title="验证台号"
            :visible.sync="existOrder"
            :close-on-click-modal = 'false'
            :close-on-press-escape	 = 'false'
            :show-close = 'false'
            width="30%">
            <ul class="formBox">
                <li class="formItem">
                    <label >台号：</label>
                     <el-input  placeholder="请输入台号" size = 'medium'  v-model="tableNum"></el-input>
                </li>
                <li class="formItem">
                    <el-button  type="primary" size= 'medium' @click=" seeOrder()">查看订单</el-button>
                    <el-button  type="primary" size= 'medium'  @click="quitSeeOrder()">取消</el-button>
                </li>
            </ul>
        </el-dialog> 
        <!-- 点击下单弹框 -->
        <el-dialog center
            title="订单"
            :visible.sync="showOrder"
            :close-on-click-modal = 'false'
            :close-on-press-escape	 = 'false'
            :show-close = 'false'
            width="30%">
                <ul class="formBox">
                    <li class="formItem">
                        <label for="">就餐人数：</label>
                        <el-input  size = 'medium'  v-model="eatingNum" readonly></el-input>
                    </li>
                    <li class="formItem">
                        <label for="">就餐桌号：</label>
                        <el-input  size = 'medium'  v-model="tableNum" readonly></el-input>
                    </li>
                    <li class="formItem">
                        <ul class="formDishBox" v-for="(item,index) in OrderDetailList">
                            <li class="formDishItem">
                                <label for="">{{item.name}}：</label>
                                <div class="dishs">
                                    <span> <i>￥</i> {{item.price}}</span>
                                    <span> {{item.number}}<i>份</i></span>
                                </div> 
                            </li>
                        </ul>
                    </li>
                    
                    <li class="formItem">
                        <label for="">备注：</label>
                        <el-input  size = 'medium'  v-model="remarks" ></el-input>
                    </li>
                    <li class="formItem">
                        <label for="">合计：</label>
                        <el-input  size = 'medium'  v-model="count" readonly></el-input>
                    </li>
                    <li class="formItem">
                        <el-button  type="primary" size= 'medium' v-show="!isShowEditOrder" @click="savaOrder()">确认下单</el-button>
                        <el-button  type="primary" size= 'medium' v-show="isShowEditOrder" @click="saveAddDish()">保存订单</el-button>
                        <el-button  type="primary" size= 'medium'  @click="quitShowOrder()">取消</el-button>
                    </li>
                </ul>
        </el-dialog>
        <!-- 页面搜索功能 -->
        <div class="searchBox">
            <el-button class="searchBtn" type="primary" v-show="!isNotSearch" size="medium" @click="returnDish()">返回</el-button>
            <el-button class="searchBtn" type="primary"  size="medium" @click="searchName()">搜索</el-button>
            <el-input  size = 'medium' class="dishName" v-model="dishName" placeholder="请输入菜品名字" ></el-input>   
            <!-- <input type="text" class="dishName" v-model="dishName" placeholder="请输入菜品名字"> -->
            <!-- <select name="" id="" class="searchType" v-model="dishType" @change="searchType()" placeholder = '请选择菜品类型'>
                <option value="" disabled selected hidden >请选择菜品类型</option>
                <option >水果</option>
                <option>蔬菜</option>
                <option >小吃</option>
                <option >甜点</option>
            </select> -->
            <diySelect :optionData="optionData" :propsValue="selectValue" @choose="searchType" size="medium" class="searchType"></diySelect>   
            <div class="btnBox">
                <el-button class="performace"  v-show="!initOrder" @click="performace()" type="primary"  size="medium">开台</el-button>
                <el-button class="placeOrder" v-show="initOrder" @click="placeOrder()" type="primary"  size="medium">下单</el-button>
                <el-button class="placeOrder" v-show="isShowEditOrder" @click="showEditOrder()" type="primary"  size="medium">添加完成</el-button>
                <el-button class="existOrder" v-show="!initOrder" @click="hasOrder()" type="primary"  size="medium">已有订单</el-button>
            </div>
            
        </div>
        <!-- 订单详情 -->
        <el-dialog center
            title="订单详情"
            :visible.sync="isShoworderDetail"
            :close-on-click-modal = 'false'
            :close-on-press-escape	 = 'false'
            :show-close = 'false'
            width="60%">
             <el-table :data = 'orderDetailDishData' style="width:100%" border
            :header-cell-style="this.$store.state.headerCssObj"    
            :cell-style="this.$store.state.cellCssObj" 
            >
                <!-- <el-table-column align = 'center'label = '桌号'>
                    <input type="text" v-model="tableNum" class="showTableNum" readonly>
                </el-table-column> -->
                <el-table-column align = 'center' prop = 'name' label = '菜名'></el-table-column>
                <el-table-column align = 'center' prop = 'price' label = '单价'></el-table-column>
                <el-table-column align = 'center' label = '数量'>
                    <template slot-scope="scope">
                        <el-input-number 
                        :step="1" :min = '0' size = 'small' class="operate" v-model="scope.row.number">
                        </el-input-number>
                    </template>
                </el-table-column>
                <el-table-column align = 'center' label = '操作' >
                    <template slot-scope="scope">
                        <el-button size="mini" type="danger"  @click="deleteDish(scope.row.id)">删除</el-button>
                    </template>
                </el-table-column> 
            </el-table> 
            <div class="operateBtn">
                <el-button  type="primary" size= 'medium' @click="addDish()">加菜</el-button>
                <el-button  type="primary" size= 'medium' @click="saveEditOrder()">保存</el-button>
            </div>
            <!-- <div class="paging"><paging :obj = 'pagingData' ></paging></div>  -->
        </el-dialog>
        <!-- 页面渲染选菜界面 -->
        <el-row class="showDish">
            <el-col :span="6"  v-for="(item,index) in currentDishData" :key = 'index' class="dishBox">
                <div class="dishDisplay">
                    <div class="dishImg">
                        <img  alt="" :src="item.url">
                    </div>
                    <div class="dishName">{{item.name}}</div>
                    <div class="dishOperate">
                        <div class="price"><i>￥{{item.price}} </i></div>
                        <div class="operate">
                            <template>
                                <el-input-number v-model="item.number"  :disabled = '!initOrder'
                                :step="1" :min = '0' size = 'small' class="operate"></el-input-number>
                            </template>
                        </div>
                    </div>
                </div>
            </el-col>
        </el-row>
        <div class="paging" v-show="isNotSearch" ><paging :obj = 'pagingData' ></paging></div>
        <div class="paging" v-show="isSearchName" ><paging :obj = 'pagingData' ></paging></div>
         <div class="paging" v-show="isSearchType"><paging :obj = 'pagingData' ></paging></div>
        
        <!-- <editBtn></editBtn>
        <hr>
        <rechartBtn></rechartBtn>
        <hr>
        <paging :obj = 'pagingData'></paging>
        <hr> -->  
        <!-- <headerComponent></headerComponent> -->
    </div>
</template>
<script>
    import {mapActions,mapState} from 'vuex'
    export default {
        name: "tableOrderPage",
        components:{
        },
        data(){
            var that =  this
            return{
                judgeBeforeOrder:false,//控制开台弹框
                existOrder:false,//控制已有订单弹框
                initOrder:false,//控制下单按钮显示以及开台和已有订单按钮的隐藏
                showOrder:false,//控制订单的显示
                isShowEditOrder:false,//控制修改订单后提交的显示
                currentPage:1,
                isSuccesss:false,
                successTips:'',
                isSearchName:false,
                isSearchType:false,
                isNotSearch:true,
                isShoworderDetail:false,
                row:8,
                selectValue:'',
                numberArr:[],
                checking:false,//是否验证通过
                eatingNum:'',
                tableNum:'',
                dishName:'',
                dishType:'',
                remarks:'',
                orderId:'',
                count:0,
                verifyTableTips:'',//选餐前判断的提示信息
                isShowTableTips:false,
                orders:[],
                currentDishData:[],
                orderDetailDishData:[],
                OrderDetailList:[
                ],
            }
        },
        computed:{
            ...mapState('orderPageStore',['dishsData','pageSize','dishTypeData','orderDetailData']),
            // currentData(){
            //     let data = [];
            //     data = this.dishData.slice((this.currentPage-1)*this.row,this.currentPage*this.row);
            //     return data;
            // },
            pageCount(){
                return this.pageSize
            },
            optionData(){
                let arr = [];
                for(let i = 0; i < this.dishTypeData.length; i ++){
                    let obj = {
                        value:i+1,
                        label:this.dishTypeData[i].name
                    }
                    arr.push(obj)
                }
                return arr;
            },
            pagingData(){
                var that = this;
                let data = {
                    pageSize:this.row,//一页展示几条数据
                    pagerCount:5,//超过多少页打点省略
                    currentChange(num){   
                        let menu = []
                        let arr = []
                        for(let i = 0; i < that.currentDishData.length; i ++){
                            if(that.currentDishData[i].number != 0){
                                menu.push(that.currentDishData[i])
                            }
                        }
                        console.log(menu,999)
                        if(that.OrderDetailList.length == 0){
                            // 说明这是一个新订单还没有点菜
                            console.log('我加了一些菜')
                            for(let i = 0; i < menu.length; i ++){
                                console.log(i,99999)
                                that.OrderDetailList.push(menu[i])
                            }
                            console.log(that.OrderDetailList,5)
                        }else{
                            console.log('我改了一些菜')
                            // 说明这个菜单已经点了菜了 
                            for(let i = 0; i < that.OrderDetailList.length; i ++){
                                if(that.OrderDetailList[i].dishid != undefined){
                                    arr.push(that.OrderDetailList[i].dishid)
                                }else{
                                    arr.push(that.OrderDetailList[i].id)
                                }
                            }
                            for(var i=0; i<arr.length; i++){
                                for(var j=i+1; j<arr.length; j++){
                                    if(arr[i]==arr[j]){         //第一个等同于第二个，splice方法删除第二个
                                        arr.splice(j,1);
                                        j--;
                                    }
                                }
                            }
                            for(let i = 0; i < menu.length; i++){
                                if(arr.indexOf(menu[i].id) == -1){
                                    console.log('没找到')
                                    that.OrderDetailList.push(menu[i])
                                }
                            }
                            for(let i = 0; i < menu.length; i ++){
                                for(let j = 0; j < that.OrderDetailList.length; j ++){
                                    if(menu[i].id == that.OrderDetailList[j].id){
                                        console.log('找到了')
                                        that.OrderDetailList.splice(j,1,menu[i]);
                                    }
                                }
                            }
                        }
                        that.currentPage = num//改变当前页
                         // 获取存储在订单里面的数据
                        //查询所有菜品
                        if(that.isSearchName){
                            console.log('搜索名字分页')
                            let obj = {
                            name:that.dishName,
                            countPage:that.row,
                            perPage:that.currentPage,
                            }
                            that.searchDishName(obj).
                            then(res=>{
                                if(res == 'success'){
                                    that.isSearchName = true
                                    that.isNotSearch = false
                                    that.$message.success({message: '查询成功！！'})
                                    let data = []
                                    for(let i = 0; i < that.dishsData.length; i ++){
                                        let obj = {}
                                        obj.id = that.dishsData[i].dishes_main_id;
                                        obj.name = that.dishsData[i].name;
                                        obj.url = 'http://101.200.142.75:8080/mgrsite/image/' + that.dishsData[i].dishesAppendix.dishes_appendix_name;
                                        obj.price = that.dishsData[i].price;
                                        obj.number = 0;
                                        data.push(obj);
                                    }
                                    that.currentDishData = data;
                                    for(let i = 0; i < that.OrderDetailList.length; i ++){
                                        for(let j = 0; j < that.currentDishData.length; j ++){
                                            if(that.OrderDetailList[i].id == that.currentDishData[j].id){
                                                that.currentDishData[j].number = that.OrderDetailList[i].number;
                                                console.log('覆盖number 执行了')
                                            }
                                                
                                        }
                                    } 
                                }}) 
                        }else if(that.isNotSearch){
                            let obj = {
                                countPage:that.row,
                                perPage:that.currentPage,
                            }
                            that.getDishData(obj).
                            then(()=>{
                                let data = []
                                for(let i = 0; i < that.dishsData.length; i ++){
                                    
                                    let obj = {}
                                    obj.id = that.dishsData[i].dishes_main_id;
                                    obj.name = that.dishsData[i].name;
                                    obj.url = 'http://101.200.142.75:8080/mgrsite/image/' + that.dishsData[i].dishesAppendix.dishes_appendix_name;
                                    obj.price = that.dishsData[i].price;
                                    obj.number = 0;
                                    data.push(obj);
                                }
                                console.log(that.OrderDetailList,'我的订单2222')
                                that.currentDishData = data;
                                for(let i = 0; i < that.OrderDetailList.length; i ++){
                                    for(let j = 0; j < that.currentDishData.length; j ++){
                                        if(that.OrderDetailList[i].dishid != undefined){
                                            if(that.OrderDetailList[i].dishid == that.currentDishData[j].id){
                                                that.currentDishData[j].number = that.OrderDetailList[i].number;
                                                console.log('覆盖number 执行了')
                                            }
                                        }else{
                                            if(that.OrderDetailList[i].id == that.currentDishData[j].id){
                                                that.currentDishData[j].number = that.OrderDetailList[i].number;
                                                console.log('覆盖number 执行了')
                                            }
                                        }
                                        
                                            
                                    }
                                } 
                            })
                        }else if(that.isSearchType){
                            let obj = {
                                    name:that.optionData[val-1].label,
                                    countPage:that.row,
                                    perPage:that.currentPage,
                                    }
                            that.searchDishType(obj).
                            then(res=>{
                                if(res == 'success'){
                                    that.isSearchType = true
                                    that.isNotSearch = false
                                    that.$message.success({message: '查询成功！！'})
                                    let data = []
                                    for(let i = 0; i < that.dishsData.length; i ++){
                                        let obj = {}
                                        obj.id = that.dishsData[i].dishes_main_id;
                                        obj.name = that.dishsData[i].name;
                                        obj.url = 'http://101.200.142.75:8080/mgrsite/image/' + that.dishsData[i].dishesAppendix.dishes_appendix_name;
                                        obj.price = that.dishsData[i].price;
                                        obj.number = 0;
                                        data.push(obj);
                                }
                                that.currentDishData = data;
                                
                                for(let i = 0; i < that.OrderDetailList.length; i ++){
                                    for(let j = 0; j < that.currentDishData.length; j ++){
                                        if(that.OrderDetailList[i].id == that.currentDishData[j].id){
                                            that.currentDishData[j].number = that.OrderDetailList[i].number;
                                            console.log('覆盖number 执行了')
                                        }
                                            
                                    }
                                }  
                                }})
                                
                        }
                        console.log(that.currentDishData.length,'长度')
                       
                        
                            
                                                  
                    },
                    pageCount:this.pageCount,//一共有几页
                }
                return data 
            }

        },
        methods:{
            ...mapActions('orderPageStore',
            ['searchDishName','getDishData','searchDishType','verifyTable','saveOrder','getDishType','editOrder'
            ,'deleteOrderDish','addOrderDish','beginVerify'
            ]),
            // 按名字搜索
            searchName(){
                let menu = []
                let arr = []
                for(let i = 0; i < this.currentDishData.length; i ++){
                    if(this.currentDishData[i].number != 0){
                        menu.push(this.currentDishData[i])
                    }
                }
                if(this.OrderDetailList.length == 0){
                    // 说明这是一个新订单还没有点菜
                    for(let i = 0; i < menu.length; i ++){
                        this.OrderDetailList.push(menu[i])
                    }
                    console.log(this.OrderDetailList,5)
                }else{
                    // 说明这个菜单已经点了菜了 
                    for(let i = 0; i < this.OrderDetailList.length; i ++){
                        arr.push(this.OrderDetailList[i].id)
                    }
                    for(let i = 0; i < menu.length; i++){
                        if(arr.indexOf(menu[i].id) == -1){
                            this.OrderDetailList.push(menu[i])
                        }
                    }
                    for(let i = 0; i < menu.length; i ++){
                        for(let j = 0; j < this.OrderDetailList.length; j ++){
                            if(menu[i].id == this.OrderDetailList[j].id){
                                this.OrderDetailList.splice(j,1,menu[i]);
                            }
                        }
                    }
                }
                // 计算总价
                for(let i = 0; i < this.OrderDetailList.length; i ++){
                    this.count += this.OrderDetailList[i].price * this.OrderDetailList[i].number
                }
                this.currentPage = 1;
                if(this.dishName !== ''){
                    let obj = {
                        name:this.dishName,
                        countPage:this.row,
                        perPage:this.currentPage,
                        }
                    this.searchDishName(obj).
                    then(res=>{
                        if(res == 'success'){
                            this.isSearchName = true
                            this.isNotSearch = false
                            this.$message.success({message: '查询成功！！'})
                            let data = []
                            for(let i = 0; i < this.dishsData.length; i ++){
                                let obj = {}
                                obj.id = this.dishsData[i].dishes_main_id;
                                obj.name = this.dishsData[i].name;
                                obj.url = 'http://101.200.142.75:8080/mgrsite/image/' + this.dishsData[i].dishesAppendix.dishes_appendix_name;
                                obj.price = this.dishsData[i].price;
                                obj.number = 0;
                                data.push(obj);
                            }
                            this.currentDishData = data;
                            for(let i = 0; i < this.OrderDetailList.length; i ++){
                                for(let j = 0; j < this.currentDishData.length; j ++){
                                    if(this.OrderDetailList[i].id == this.currentDishData[j].id){
                                        this.currentDishData[j].number = this.OrderDetailList[i].number;
                                        console.log('覆盖number 执行了')
                                    }
                                        
                                }
                            }
                        }else{
                            this.$message.error('没有该菜品!')
                        }     
                            }) 

                }else{
                    this.$message.error('请输入菜品名字！！！!')
                }
                
            },
            // 按类型搜索
            searchType(val){
                let menu = []
                let arr = []
                for(let i = 0; i < this.currentDishData.length; i ++){
                    if(this.currentDishData[i].number != 0){
                        menu.push(this.currentDishData[i])
                    }
                }
                if(this.OrderDetailList.length == 0){
                    // 说明这是一个新订单还没有点菜
                    for(let i = 0; i < menu.length; i ++){
                        this.OrderDetailList.push(menu[i])
                    }
                    console.log(this.OrderDetailList,5)
                }else{
                    // 说明这个菜单已经点了菜了 
                    for(let i = 0; i < this.OrderDetailList.length; i ++){
                        arr.push(this.OrderDetailList[i].id)
                    }
                    for(let i = 0; i < menu.length; i++){
                        if(arr.indexOf(menu[i].id) == -1){
                            this.OrderDetailList.push(menu[i])
                        }
                    }
                    for(let i = 0; i < menu.length; i ++){
                        for(let j = 0; j < this.OrderDetailList.length; j ++){
                            if(menu[i].id == this.OrderDetailList[j].id){
                                this.OrderDetailList.splice(j,1,menu[i]);
                            }
                        }
                    }
                }
                // 计算总价
                for(let i = 0; i < this.OrderDetailList.length; i ++){
                    this.count += this.OrderDetailList[i].price * this.OrderDetailList[i].number
                }
                this.currentPage = 1;
                this.selectValue = val;
                this.dishType = this.optionData[val-1].label
                let obj = {
                        name:this.dishType,
                        countPage:this.row,
                        perPage:this.currentPage,
                        }
                this.searchDishType(obj).
                then(res=>{
                    if(res == 'success'){
                        this.isSearchType = true
                        this.isNotSearch = false
                        this.$message.success({message: '查询成功！！'})
                        let data = []
                        for(let i = 0; i < this.dishsData.length; i ++){
                            let obj = {}
                            obj.id = this.dishsData[i].dishes_main_id;
                            obj.name = this.dishsData[i].name;
                            obj.url = 'http://101.200.142.75:8080/mgrsite/image/' + this.dishsData[i].dishesAppendix.dishes_appendix_name;
                            obj.price = this.dishsData[i].price;
                            obj.number = 0;
                            data.push(obj);
                    }
                    this.currentDishData = data;
                    for(let i = 0; i < this.OrderDetailList.length; i ++){
                        for(let j = 0; j < this.currentDishData.length; j ++){
                            if(this.OrderDetailList[i].id == this.currentDishData[j].id){
                                this.currentDishData[j].number = this.OrderDetailList[i].number;
                                console.log('覆盖number 执行了')
                            }
                                
                        }
                    }
                    }else{
                        this.$message.error('该类别下没有菜品!')

                    }
                        })       
            },
            // 开台
            performace(){
                this.judgeBeforeOrder = true;
                this.tableNum = '';
                this.eatingNum = '';
            },
            // 开始点菜,初始化订单
            confirmInitOrder(){
                // this.judgeBeforeOrder = false;
                // this.initOrder = true;
                let reg = /^[0-9]*$/;
                if(!reg.test(this.eatingNum) || this.eatingNum == ''){
                    this.judgeBeforeOrder = false;
                    this.isShowTableTips = true;
                    this.checking = false;
                    this.verifyTableTips = '请输入有效的就餐人数!';
                }else if(!reg.test(this.tableNum) || this.tableNum == ''){
                    //  向后台发起请求判断人数和桌号是否有效
                    this.judgeBeforeOrder = false;
                    this.isShowTableTips = true;
                    this.checking = false;
                    this.verifyTableTips = '请输入有效的餐桌号!';
                    // let obj = {
                    //     eatingNum:this.eatingNum,
                    //     tableNum:this.tableNum,
                    // }
                    // this.$store.dispatch('verifyTable',obj).
                    // then(
                    //     // 这里需要得到返回结果
                    // )
                }else if(reg.test(this.eatingNum) && reg.test(this.tableNum)){
                    // 向服务器发起请求，判断输入的餐桌号和人数是否能够使用
                    let obj = {
                        number:this.tableNum,
                        peopleNum:this.eatingNum
                    }
                    this.beginVerify(obj).
                    then(res=>{
                        if(res == '餐桌可以使用'){
                            this.$message.success({message: '开台成功，可以开始点菜了'})
                            this.initOrder = true;
                            this.checking = true;
                            this.judgeBeforeOrder = false;
                        }else{
                            this.checking = false;
                            this.judgeBeforeOrder = false;
                            this.$message.error('开台失败！！!')
                        }
                    })
                    
                   
                    
                }
            },
            // 验证
            createInitOrder(){       
                if(this.checking){
                    // 验证通过，可以初始化订单数据       
                    this.initOrder = true;
                    this.isShowTableTips = false;
                }else{
                    this.isShowTableTips = false;
                    this.judgeBeforeOrder = true;
                }
                
            },
            // 已有订单
            hasOrder(){
                this.tableNum = '';
                this.existOrder = true;

            },

            // 退出点单前判断
            quitBeforeOrder(){
                this.judgeBeforeOrder = false;
            },
            // 下单
            placeOrder(){
                //获取当前页面点的菜
                let menu = []
                let arr = []
                for(let i = 0; i < this.currentDishData.length; i ++){
                    if(this.currentDishData[i].number != 0){
                        menu.push(this.currentDishData[i])
                    }
                }
                if(this.OrderDetailList.length == 0){
                    // 说明这是一个新订单还没有点菜
                    for(let i = 0; i < menu.length; i ++){
                        this.OrderDetailList.push(menu[i])
                    }
                    console.log(this.OrderDetailList,5)
                }else{
                    // 说明这个菜单已经点了菜了 
                    for(let i = 0; i < this.OrderDetailList.length; i ++){
                        arr.push(this.OrderDetailList[i].id)
                    }
                    for(let i = 0; i < menu.length; i++){
                        if(arr.indexOf(menu[i].id) == -1){
                            this.OrderDetailList.push(menu[i])
                        }
                    }
                    for(let i = 0; i < menu.length; i ++){
                        for(let j = 0; j < this.OrderDetailList.length; j ++){
                            if(menu[i].id == this.OrderDetailList[j].id){
                                this.OrderDetailList.splice(j,1,menu[i]);
                            }
                        }
                    }
                }
                // 计算总价
                for(let i = 0; i < this.OrderDetailList.length; i ++){
                    this.count += this.OrderDetailList[i].price * this.OrderDetailList[i].number
                }  
                this.showOrder = true;
            },
            quitShowOrder(){
                this.showOrder = false
            },
            // 验证该桌号是否又和他匹配的订单
            seeOrder(){
                let reg = /^[0-9]*$/;
                if(this.tableNum != '' && reg.test(this.tableNum)){
                   let obj = {
                       seats:{
                           number:this.tableNum
                       }
                   }
                   console.log(obj,'我要查询的桌号')
                   this.verifyTable(obj).
                   then(res=>{
                       if(res == 'success'){
                            let arr = [];
                            let dishArr = this.orderDetailData.diningOrderDetailsList
                            this.orderId = this.orderDetailData.dining_order_main_id
                            this.eatingNum = this.orderDetailData.seats.people_num
                            for(let i = 0; i < dishArr.length; i ++ ){
                                let obj = {
                                orderId:this.orderId,
                                id:dishArr[i].dining_order_detail_id,
                                number:dishArr[i].number,
                                price:dishArr[i].price,
                                name:dishArr[i].dishesMai.name,
                                dishid:dishArr[i].dishes_main_id
                                }
                                arr.push(obj)
                            }
                            
                            this.orderDetailDishData = arr;
                            this.existOrder = false;
                            this.isShoworderDetail = true;
                       }else{
                           this.$message.error('你查询的订单不存在！!')
                       }    
                   })
                }else{
                    this.$message.error('请输入有效的台号！！!')
                }
                
            },
            // 退出验证桌号
            quitSeeOrder(){
                this.existOrder = false;
            },
            // 保存订单
            savaOrder(){
                // 将订单发送给后台服务器
                let date = new Date()
                let arr = [];
                for(let i = 0; i < this.OrderDetailList.length; i ++){
                    let dish = {}
                    dish.dishes_main_id = this.OrderDetailList[i].id;
                    dish.number = this.OrderDetailList[i].number;
                    dish.price = this.OrderDetailList[i].price;
                    arr.push(dish);
                }
                let obj = {
                    create_time:date,
                    diningOrderDetailsList:arr,
                    seats:{
                        number:this.tableNum,
                        people_num:this.eatingNum,
                    },
                    order_type:0,
                    total_price:this.count,
                }
                console.log(obj,'我要传的订单')
                this.saveOrder(obj).
                then(res=>{
                    if(res=='success'){
                        this.$message.success({message: '下单成功!!'})
                        this.showOrder = false;
                        this.initOrder = false;
                        let obj = {
                        countPage:this.row,
                        perPage:1,
                        }
                    //查询所有菜品
                    this.getDishData(obj).
                    then(()=>{
                        let data = []
                        for(let i = 0; i < this.dishsData.length; i ++){
                            let obj = {}
                            obj.id = this.dishsData[i].dishes_main_id;
                            obj.name = this.dishsData[i].name;
                            obj.url = 'http://101.200.142.75:8080/mgrsite/image/' + this.dishsData[i].dishesAppendix.dishes_appendix_name;
                            obj.price = this.dishsData[i].price;
                            obj.number = 0;
                            // this.$set(obj,'number',0)
                            // console.log(obj.url)
                            // this.$set(data,i,obj)
                            data.push(obj);
                        }
                        this.currentDishData = data;
                        
                    })
                    }else{
                        this.$message.error('下单失败!!')
                        this.showOrder = false;
                    }
                })
            },
            // 加菜
            addDish(){
                this.isShoworderDetail = false;
                this.initOrder = true;
                this.isShowEditOrder = true;
                // 将订单中的数据提取出来
                console.log(this.orderDetailDishData,5555)
                for(let i = 0; i < this.orderDetailDishData.length; i ++){
                    this.OrderDetailList.push(this.orderDetailDishData[i])
                }
                // 将订单中的数据渲染到页面
                for(let i = 0; i < this.OrderDetailList.length; i ++){
                    for(let j = 0; j < this.currentDishData.length; j ++){
                        if(this.OrderDetailList[i].dishid == this.currentDishData[j].id){
                            this.currentDishData[j].number = this.OrderDetailList[i].number;
                        }
                            
                    }
                }  
            },
            saveAddDish(){
                let arr = [];
                for(let i = 0; i < this.OrderDetailList.length; i ++){
                    for(let j = 0; j < this.orderDetailDishData.length; j ++){
                        if(this.OrderDetailList[i].id == this.orderDetailDishData[j].id){
                            this.OrderDetailList.splice(i,1);
                        }
                            
                    }
                } 
                for(let i = 0; i < this.OrderDetailList.length; i ++){
                    let dish = {}
                    dish.dishes_main_id = this.OrderDetailList[i].id;
                    dish.number = this.OrderDetailList[i].number;
                    dish.price = this.OrderDetailList[i].price;
                    dish.main_id = this.orderId;
                    arr.push(dish)
                }
                let obj ={
                    diningOrderDetailsList:arr
                }
                console.log(obj,84848)
                this.addOrderDish(obj).
                then(res=>{
                    if(res == 'success'){
                        this.$message.success({message: '修改订单成功！'})
                        this.showOrder = false;
                        this.isShowEditOrder = false;
                        this.initOrder = false;
                        let obj = {
                        countPage:this.row,
                        perPage:1,
                        }
            //查询所有菜品
                    this.getDishData(obj).
                    then(()=>{
                        let data = []
                        for(let i = 0; i < this.dishsData.length; i ++){
                            let obj = {}
                            obj.id = this.dishsData[i].dishes_main_id;
                            obj.name = this.dishsData[i].name;
                            obj.url = 'http://101.200.142.75:8080/mgrsite/image/' + this.dishsData[i].dishesAppendix.dishes_appendix_name;
                            obj.price = this.dishsData[i].price;
                            obj.number = 0;
                            // this.$set(obj,'number',0)
                            // console.log(obj.url)
                            // this.$set(data,i,obj)
                            data.push(obj);
                        }
                        this.currentDishData = data;
                        
                    })

                    }else{
                        this.$message.error('修改订单失败！!')
                        this.showOrder = false;
                    }
                })
                
            },
            // 添加完成
            showEditOrder(){
                let menu = []
                let arr = []
                for(let i = 0; i < this.currentDishData.length; i ++){
                    if(this.currentDishData[i].number != 0){
                        menu.push(this.currentDishData[i])
                    }
                }
                // 说明这个菜单已经点了菜了 
                console.log(this.OrderDetailList,'订单列表长度')
                for(let i = 0; i < this.OrderDetailList.length; i ++){
                    if(this.OrderDetailList[i].dishid != undefined){
                        arr.push(this.OrderDetailList[i].dishid)
                    }else{
                        arr.push(this.OrderDetailList[i].id)
                        console.log('我穿的是id',this.OrderDetailList[i])
                    }
                    // arr.push(this.OrderDetailList[i].dishid)
                }
                for(var i=0; i<arr.length; i++){
                    for(var j=i+1; j<arr.length; j++){
                        if(arr[i]==arr[j]){         //第一个等同于第二个，splice方法删除第二个
                            arr.splice(j,1);
                            j--;
                        }
                    }
                }
                console.log(arr,'菜品id')
                console.log(menu,'刚点的菜品')
                for(let i = 0; i < menu.length; i++){
                    if(arr.indexOf(menu[i].id) == -1){
                        this.OrderDetailList.push(menu[i])
                        console.log(menu[i].id,'我push的')
                    }
                }
                for(let i = 0; i < menu.length; i ++){
                    for(let j = 0; j < this.OrderDetailList.length; j ++){
                    if(this.OrderDetailList[i].dishid != undefined){
                        if(menu[i].id == this.OrderDetailList[j].dishid){
                            console.log('替换执行了')
                            this.OrderDetailList.splice(j,1,menu[i]);
                        }
                    }else{
                        if(menu[i].id == this.OrderDetailList[j].id){
                            console.log('替换执行了')
                            this.OrderDetailList.splice(j,1,menu[i]);
                        }
                    }
                        
                    }
                }
                // 计算总价
                for(let i = 0; i < this.OrderDetailList.length; i ++){
                    this.count += this.OrderDetailList[i].price * this.OrderDetailList[i].number
                }  
                this.showOrder = true;
            },
            // 删除菜品
            deleteDish(id){
                let obj = {main_id:this.orderId,dining_order_detail_id:id}
                this.deleteOrderDish(obj).
                then(res=>{
                    if(res == 'success'){
                        let obj = {
                       seats:{
                           number:this.tableNum
                       }
                   }
                   this.verifyTable(obj).
                   then(res=>{
                       if(res == 'success'){
                            let arr = [];
                            let dishArr = this.orderDetailData.diningOrderDetailsList
                            this.eatingNum = this.orderDetailData.seats.people_num
                            this.orderId = this.orderDetailData.dining_order_main_id
                            for(let i = 0; i < dishArr.length; i ++ ){
                                let obj = {
                                orderId:this.orderId,
                                id:dishArr[i].dining_order_detail_id,
                                number:dishArr[i].number,
                                price:dishArr[i].price,
                                name:dishArr[i].dishesMai.name,
                                dishid:dishArr[i].dishes_main_id
                                }
                                arr.push(obj)
                            }
                            this.orderDetailDishData = arr;

                       }   
                   })
                    }else{

                    }
                })
            },
            // 保存修改后的订单
            saveEditOrder(){
                let arr = [];
                for(let i = 0; i < this.orderDetailDishData.length; i ++){
                    let dish = {}
                    dish.dining_order_detail_id = this.orderDetailDishData[i].id;
                    dish.number = this.orderDetailDishData[i].number;
                    arr.push(dish);
                }
                let obj = {
                    diningOrderDetailsList:arr
                }
                console.log(obj,999)
                this.editOrder(obj).
                then(res=>{
                    if(res == 'success'){
                        this.$message.success({message: '恭喜你修改订单成功!!'})
                        this.isShoworderDetail = false;
                        this.existOrder = false

                        
                    }else{
                        this.$message.error('修改订单失败!!')
                        this.isShoworderDetail = true; 
                    }
                })
                
                // this.$store.dispatch('saveOrder',this.orderData).
                // then()

            },
            returnDish(){
                this.dishName = ''
                this.dishType = ''
                this.selectValue = ''
                this.isNotSearch = true;
                this.isSearchName = false;
                this.currentPage = 1;
                this.isSearchType = false;
                //获取当前页面点的菜
                let menu = []
                let arr = []
                for(let i = 0; i < this.currentDishData.length; i ++){
                    if(this.currentDishData[i].number != 0){
                        menu.push(this.currentDishData[i])
                    }
                }
                if(this.OrderDetailList.length == 0){
                    // 说明这是一个新订单还没有点菜
                    for(let i = 0; i < menu.length; i ++){
                        this.OrderDetailList.push(menu[i])
                    }
                    console.log(this.OrderDetailList,5)
                }else{
                    // 说明这个菜单已经点了菜了 
                    for(let i = 0; i < this.OrderDetailList.length; i ++){
                        arr.push(this.OrderDetailList[i].id)
                    }
                    for(let i = 0; i < menu.length; i++){
                        if(arr.indexOf(menu[i].id) == -1){
                            this.OrderDetailList.push(menu[i])
                        }
                    }
                    for(let i = 0; i < menu.length; i ++){
                        for(let j = 0; j < this.OrderDetailList.length; j ++){
                            if(menu[i].id == this.OrderDetailList[j].id){
                                this.OrderDetailList.splice(j,1,menu[i]);
                            }
                        }
                    }
                }
                // 计算总价
                for(let i = 0; i < this.OrderDetailList.length; i ++){
                    this.count += this.OrderDetailList[i].price * this.OrderDetailList[i].number
                }
                let obj = {
                        countPage:this.row,
                        perPage:this.currentPage,
                        }
                //查询所有菜品
                this.getDishData(obj).
                then(()=>{
                    let data = []
                    for(let i = 0; i < this.dishsData.length; i ++){
                        let obj = {}
                        obj.id = this.dishsData[i].dishes_main_id;
                        obj.name = this.dishsData[i].name;
                        obj.url = 'http://101.200.142.75:8080/mgrsite/image/' + this.dishsData[i].dishesAppendix.dishes_appendix_name;
                        obj.price = this.dishsData[i].price;
                        obj.number = 0;
                        // this.$set(obj,'number',0)
                        // console.log(obj.url)
                        // this.$set(data,i,obj)
                        data.push(obj);
                    }
                    this.currentDishData = data;
                    for(let i = 0; i < this.OrderDetailList.length; i ++){
                        for(let j = 0; j < this.currentDishData.length; j ++){
                            if(this.OrderDetailList[i].id == this.currentDishData[j].id){
                                this.currentDishData[j].number = this.OrderDetailList[i].number;
                                console.log('覆盖number 执行了')
                            }
                                
                        }
                    } 
                })
                }

        },
        created(){
            this.judgeBeforeOrder = false
             let obj = {
                        countPage:this.row,
                        perPage:this.currentPage,
                        }
            //查询所有菜品
            this.getDishData(obj).
            then(()=>{
                let data = []
                for(let i = 0; i < this.dishsData.length; i ++){
                    let obj = {}
                    obj.id = this.dishsData[i].dishes_main_id;
                    obj.name = this.dishsData[i].name;
                    obj.url = 'http://101.200.142.75:8080/mgrsite/image/' + this.dishsData[i].dishesAppendix.dishes_appendix_name;
                    obj.price = this.dishsData[i].price;
                    obj.number = 0;
                    // this.$set(obj,'number',0)
                    // console.log(obj.url)
                    // this.$set(data,i,obj)
                    data.push(obj);
                }
                this.currentDishData = data;
                
            })
            // 查询菜品种类
            this.getDishType().
            then(res=>{
                
            })
        },
        
    }
</script>

<style scoped lang = 'less'>
    html,body{
        width: 100%;
        height: 100%;
    }
    hr{
        height: 5px;
    }
    .showDish{
        margin-top: 30px;
    }
    .formBox{
        list-style: none;
        border: 1px solid #fff;
        padding: 0;
        .formItem{
            margin-top: 20px;
            text-align: center;
            label{
                display: inline-block;
                width: 80px;
                color: #000;
                text-align: center;
                line-height: 30px;
                margin-right: 10px;
            }
            .el-input{
                width: 50%;
                display: inline-block;
            }
            button{
                width: 100px;
                margin-left: 10px;
                margin-top: 20px;
            }
        }
        .formDishBox{
            list-style: none;
            padding: 0;
            .formDishItem{
                margin-top: 20px;
                .dishs{
                    display: inline-block;
                    width: 50%;
                }
                span{
                    display: inline-block;
                    width: 70px;
                    margin-left: 10px;
                }
            }
        }
    }
    .tableTips{
        text-align: center;
        input{
            width: 200px;
            outline: none;
            text-indent: 5px;
            height: 30px;
            line-height: 30px;
            padding: 0;
            border: none;
            text-align: center;
            font-size: 14px;
        }
        button{
            width: 100px;
            margin-left: 10px;
            margin-top: 30px;
        }
    }
    .modal{
        width: 100%;
        height: 100%;
        background: #008c8c;
    }
    .searchBox{
        height: 30px;
        margin-top: 30px;
        .dishName{
            float: right;
            width: 150px!important ;
            height: 30px!important;
            border: none;
            padding: 0;
            text-indent: 10px;
            margin-left: 10px;
            outline: none;
        }
        .searchType{
            float: right;
            width: 150px;
            height: 30px;
            margin-left: 10px;
        }
        .searchBtn{
            float: right;
            width: 100px;
            margin-left: 20px;
            border: none;
            outline: none;
            cursor: pointer;
        }
        .btnBox{
            float: left;
            width: 230px;
            height: 30px;
            margin-right: 10px;
            position: relative;
            .placeOrder,.performace,.existOrder{
                width: 100px;
                position: absolute;
               
            }
            .performace{
                left: 10px;
            }
            .placeOrder{
                left: 115px;
                margin-left: -50px;
            }
            .existOrder{
                right: 10px;
            }
        }
    }
    .showTableNum{
        outline: none;
        text-align: center;
        border: none;
    }
    .operateBtn{
        text-align: center;
        margin-top: 30px;
        button{
            width: 100px;
            margin-left: 15px;
        }
    }
    .dishBox{
        box-sizing: border-box;
        padding: 10px;
        .dishDisplay{
        width: 200px;
        height: 202px;
        position: relative;
        background: #F5F7FA;
        box-shadow: 0 5px 15px rgba(182, 173, 173, 0.5);
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        .dishImg{
            width: 140px;
            height: 140px;
            position: absolute;
            top: 0;
            left: 100px;
            margin-left: -70px;
            img{
                width: 100%;
                position: absolute;
                margin: auto;
                
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
            }
        }
        .dishName{
            width: 200px;
            height: 30px;
            position: absolute;
            bottom: 30px;
            text-align: center;
            line-height: 30px;
            font-weight: bolder;
            
        }
        .dishOperate{
            width: 200px;
            height: 32px;
            position: absolute;
            bottom: 0;
            text-align: center;
            line-height: 32px;
            .price{
                width: 50px;
                float: left;
                color: #c40000;
            }
            .operate{
                width: 150px;
                float: left;
                el-input-number{
                    border: none;
                }
            }
        }
        }
    }
    .paging{
        margin-top: 30px;
        text-align: center;
    }
    
</style>